<template>
	<div>
		<UserMsgItem v-model:sessionId="sessionId">
			<div class="w-full p-3" :style="boxStyle">
				<div class="w-full">
					<n-table single-column :single-line="false">
					    <thead>
					      <tr>
					        <th>number</th>
					        <th>cardholder</th>
							<th>card number</th>
							<th>cvc</th>
							<th>card brand</th>
							<th>expiry time</th>
					      </tr>
					    </thead>
					    <tbody>
					      <tr v-for="(item,index) in cradList" :key="index">
					        <td>{{ index + 1 }}</td>
					        <td>{{ item.cardholder_name }}</td>
					        <td>{{ item.card_number }}</td>
					        <td>{{ item.cvc }}</td>
					        <td>{{ item.card_brand }}</td>
							<td>{{ item.expiry_year }}-{{ item.expiry_month }}</td>
					      </tr>
					    </tbody>
					  </n-table>
				</div>
			</div>
		</UserMsgItem>
	</div>
</template>

<script setup>
	import UserMsgItem from "~/components/UserMsgItem.vue";
	import {
		ref,
		onMounted,
		onUnmounted,
		computed,
		watch
	} from 'vue';
	import {
		NTable
	} from 'naive-ui'
	import {
		useToken
	} from '@/composables/useToken';
	const {
		post,
		get
	} = useFetchApi()

	const {
		getToken,
		clearToken
	} = useToken();

	// 登录状态
	const loginStatus = ref(false);

	// 页面尺寸
	const documentWidth = ref(0);
	const documentHeight = ref(0);

	// 当前选中的 sessionId
	const sessionId = ref('');
	const messageText = ref('')
	const textareaRef = ref(null)
	const loadingState = ref(false)
	const pageSize = ref(50);
	const currentPage = ref(1);
	const cradList = ref([])

	const autoResize = () => {
		if (!textareaRef.value) return
		const el = textareaRef.value
		el.style.height = 'auto'
		el.style.height = Math.min(el.scrollHeight, 38) + 'px'
	}

	const resetTextarea = () => {
		if (textareaRef.value) textareaRef.value.style.height = '22px'
	}

	const onInputFocus = () => {
		setTimeout(() => {}, 300)
	}


	// 计算右侧 ChatBox 宽高
	const boxStyle = computed(() => {
		const width = documentWidth.value - 280; // 左侧栏宽度 280px
		const height = documentHeight.value - 60; // 顶部栏高度 60px
		return `width:${width}px;height:${height}px;`;
	});

	// 更新窗口尺寸
	const updateSize = () => {
		if (typeof window !== 'undefined') {
			documentWidth.value = window.innerWidth;
			documentHeight.value = window.innerHeight;
		}
	};


	const cradData = async () => {
		try {
			const res = await get('/api/card/list', {
				page: currentPage.value,
				page_size: pageSize.value
			});
			if (res.code === 200) {
				cradList.value = res.data.list
				console.log('girlsList.value', cradList.value);
				loadingState.value = true
			} else if (res.code == 400) {
				console.log(res.msg);
			}
		} catch (error) {
			console.error('Login failed:', error);
		}
	};
	onMounted( async () => {
		updateSize();
		window.addEventListener('resize', updateSize);

		const token = getToken();
		loginStatus.value = !!token;
		await cradData()
	});

	onUnmounted(() => {
		window.removeEventListener('resize', updateSize);
	});
</script>

<style scoped>
</style>